<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/xiangqin.css">
    <link rel="stylesheet" href="../css/resed.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-con w">
            <div class="header-con-a">
                <a href="index.html">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a href="">loT</a>
                <span>|</span>
                <a href="">云服务</a>
                <span>|</span>
                <a href="">天星数科</a>
                <span>|</span>
                <a href="">有品</a>
                <span>|</span>
                <a href="">小爱开放平台</a>
                <span>|</span>
                <a href="">企业团购</a>
                <span>|</span>
                <a href="">资质证照</a>
                <span>|</span>
                <a href="">协议规则</a>
                <span>|</span>
                <a href="">下载app</a>
                <span>|</span>
                <a href="">智能生活</a>
                <span>|</span>
                <a href="">Select Location</a>
            </div>
            <div class="header-con-b">
                <a href="denlu.html">登录</a>
                <span>|</span>
                <a href="zhuce.html">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
            </div>
            <div class="header-con-c">
                <a href=""> 购物车</a>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="heade w">
        <div class="heade-logo">
            <img src="../img/logo1.png" alt="">
        </div>
        <div class="heade-nav">
            <ul class="nav">
                <li>
                    小米手机
                    <ol style="display: none;">
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                    </ol>
                </li>
                <li>Redmi 红米
                    <ol style="display: none;">
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                        <li>
                            <div> <img src="../img/2.png" alt="">
                            </div>
                            <p>小米MIX FOLD</p>
                            <span>9999元起</span>
                        </li>
                    </ol>
                </li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>家电</li>
                <li>路由器</li>
                <li>智能硬件</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
        </div>
        <div class="heade-search">
            <input type="text" id="ipt1" placeholder="食品">
            <ul id="list">
                <li>食品</li>
                <li>汽车</li>
                <li>衣服</li>
                <li>珠宝</li>
                <li>化妆品</li>
            </ul>
            <input type="text" id="ipt2">
        </div>
    </div>
    <!-- 米家 -->
    <div class="cuan-lcuan-l w">
        <h5>米家智能窗帘</h5>
        <h6>用户评价</h6>
    </div>
    <div class="cuan-lcuan-M w">
        <span>为方便您的购买,请提前登录</span>
        <a href="">立即登录</a>
    </div>
    <!-- 详情页 -->
    <div class="details w">
        <div id="small-box">
            <div id="mask">

            </div>
            <div id="big-box">

            </div>
        </div>
        <div class="details-r">
            <div class="details-r-a">
                <h2>米家智能窗帘</h2>
                <p>多种智能开合方式丨丰富智能联动丨直流静音电机
                </p>
                <p class="fg">小米自营</p>
                <span>799元</span>
            </div>
            <div class="details-r-b">
                <ul>
                    <li>北京</li>
                    <li>北京市</li>
                    <li>海淀区</li>
                    <li>清河街道</li>
                    <li>修改</li>
                </ul>
                <div>有现货</div>
            </div>
            <div class="details-c">
                <ul>
                    <li class="details-c-1">选择规格</li>
                    <li class="details-c-2">个</li>
                </ul>
            </div>
            <div class="details-d">
                <ul>
                    <li>米家智能窗帘 </li>
                    <li>799元</li>
                </ul>
                <p>总计：799元</p>
            </div>
            <div class="details-e">
                <ul>
                    <li class="a">加入购物车</li>
                    <li class="b">喜欢</li>
                </ul>
            </div>
            <div class="details-f">
                <ul>
                    <li>小米自营</li>
                    <li>小米发货</li>
                    <li>支持7天无理由退货（安装后不支持）</li>
                    <li>运费说明</li>
                    <li>企业信息</li>
                    <li>企业信息</li>
                    <li>7天价格保护</li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <p class="details-"></p>
    <div class="shopping w">
        <a href="" class="shopping-a">商品详情</a>
        <span>|</span>
        <a href="">安装须知</a>
        <span>|</span>
        <a href="">常见问题</a>
    </div>
    <!-- 图片 -->
    <div class="imgs1 w">
        <!-- <img src="../img/imgs1.jpg" alt=""> -->

    </div>
    <div class="imgs2 w">
        <img src="../img/imgs.jpg" alt="">
    </div>
    <div class="imgs3 w">
        <img src="../img/imgs3.jpg" alt="">
    </div>
    <div class="imgs4 w">
        <img src="../img/imgs4.jpg" alt="">
    </div>
    <div class="imgs5 w">
        <img src="../img/imgs5.jpg" alt="">
    </div>
    <div class="imgs6 w">
        <img src="../img/imgs6.jpg" alt="">
    </div>
    <div class="imgs7 w">
        <img src="../img/imgs7.jpg" alt="">
    </div>
    <div class="imgs8 w">
        <img src="../img/imgs8.jpg" alt="">
    </div>
    <div class="imgs9 w">
        <img src="../img/imgs9.jpg" alt="">
    </div>
    <!-- 底部 -->
    <div class="footer w">
        <div class="footer-a">
            <ul>
                <li>预约维修服务</li>|
                <li>7天无理由退货</li>|
                <li>15天免费换货</li>|
                <li>满69包邮</li>|
                <li>520余家售后网点</li>
            </ul>
        </div>
        <div class="footer-b">
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
                <dd>购物指南</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <div class="footer-b-1">
                <p>400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <a href="">人工客服</a>
                <p>关注小米</p>
            </div>
        </div>
        <!-- dao1 -->
        <div class="footer-d w">
            <div class="footer-d-1">
                <img src="../img/logo1.png" alt="">
            </div>
            <div class="footer-d-2">
                <a href="">小米商城</a>
                <span>|</span>
                <a href="">MIUI</a>
                <span>|</span>
                <a href="">米家</a>
                <span>|</span>
                <a href="">米聊</a>
                <span>|</span>
                <a href="">多看</a>
                <span>|</span>
                <a href="">游戏</a>
                <span>|</span>
                <a href="">政企服务</a>
                <span>|</span>
                <a href="">小米天猫店</a>
                <span>|</span>
                <a href="">小米集团隐私政策</a>
                <span>|</span>
                <a href="">小米公司儿童信息保护规则</a>
                <span>|</span>
                <a href="">小米商城隐私政策</a>
                <span>|</span>
                <a href="">小米商城用户协议</a>
                <span>|</span>
                <a href="">问题反馈</a>
                <span>|</span>
                <a href="">Select Location</a>
            </div>
            <div class="footer-d-3">
                <a href="">北京互联网法院法律服务工作站</a>
                <span>|</span>
                <a href="">中国消费者协会</a>
                <span>|</span>
                <a href="">北京市消费者协会 
            </div>
            <p>
                京ICP证110507号,京ICP备100京网文[2020]0276-042号京网文[2020]  <br> 0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
                京ICP证110507号,京ICP备100京网文[2020]0276-042号京网文[2020]  <br> 0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
                京ICP证110507号,京ICP备100京网文[2020]0276-042号京网文[2020]  <br> 0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
                京网文[2020]0276-042号
            </p>
           <div class="footer-img">
            <img src="	https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
            <img src="	https://s01.mifile.cn/i/v-logo-2.png" alt="">
            <img src="https://s01.mifile.cn/i/v-logo-2.png
            " alt="">
            <img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png" alt="">
           </div>
          <div class="laster--">探索黑科技，小米为发烧而生</div>
          <div class="kongde"></div>
        </div>
    </div>
</body>

</html>
<script src="../js/jQuery.js"></script>
<script src="../js/index.js"></script>
<script src="../js/mf.js"></script>
<script>
    // 二级菜单
    $(".nav>li").mouseover(function() {
        $(this).children("ol").show();
    })
    $(".nav>li").mouseout(function() {
        $(this).children("ol").hide();
    })


    let oSmallBox = document.querySelector("#small-box");
    let oMask = document.querySelector("#mask");
    let oBigBox = document.querySelector("#big-box");

    let mf = new MF(oSmallBox, oMask, oBigBox);
</script>